<ion-content padding>
  <div id="homeWrapper">
    <div class="location">
      <div class="place" (click)="viewPlace()">
        <img class="locationIcon" src="../../assets/images/position.png">
        <span class="high">创维大厦3楼</span>
      </div>
      <div class="scan">
        <img class="scanIcon" src="../../assets/images/scan.png">
        <span class="sao">扫一扫</span>
      </div>
    </div>
    <div class="banner">
      <!--<div class="bannerImg">-->

        <!---->

      <!--</div>-->

      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>

    </div>
    <div class="tips" *ngIf="order">
      <span>您有2个待取货订单</span>
    </div>
    <div class="timeFragment">
      <div class="wrapTab" [ngClass]="{'turnGreen':isClick && currentIndex === 1}" (click)="showTab(1)">
        <span class="spTime">早餐</span>
      </div>
      <div class="wrapTab" [ngClass]="{'turnGreen':isClick && currentIndex === 2}" (click)="showTab(2)">
        <span class="spTime">午餐</span>
      </div>
      <div class="wrapTab" [ngClass]="{'turnGreen':isClick && currentIndex === 3}" (click)="showTab(3)">
        <span class="spTime">下午茶</span>
      </div>
    </div>
    <div class="goodsWrap">
      <ul>
        <li *ngFor="let combo of comboList">
          <a>
            <img class="goodsImg" src="{{combo.img}}" (click)="goDetail(combo)">
            <p class="goodsName">{{combo.name}}</p>
            <div class="priceWrapper">
              <span class="goodsVip">￥{{combo.appPrice}}</span><label class="goodsPrice">￥{{combo.vemPrice}}</label>
              <img (click)="addToShoppingCart(combo)" class="cart" src="../../assets/images/cart_red.png">
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="greyWrap"></div>

    <div class="everBuy">
      <span>曾经购买</span>
    </div>
    <div class="everWrap">
      <div class="imgBox">
        <img src="../../assets/images/logo.png">
      </div>
      <div class="descBox">
        <p class="everName">
          新品上市 泰味蜂蜜黄油味200g+原味有益C优酸乳300ML
        </p>
        <p class="everSubject">
          早餐必备，肠胃好帮手
        </p>
        <strong><label>￥</label>12.90<label>￥15.00</label></strong>
        <img src="../../assets/images/cart_red.png">
      </div>
    </div>

    <div class="greyWrap"></div>
    <div class="category">
      <div class="wrapTab" [ngClass]="{'turnGreen': isCategoryClick && currentCategoryIndex === 1 }"
           (click)="showCategoryTab(1)">
        <span class="spTime">推荐</span>
      </div>
      <div class="wrapTab" [ngClass]="{'turnGreen': isCategoryClick && currentCategoryIndex === 2 }"
           (click)="showCategoryTab(2)">
        <span class="spTime">饮料</span>
      </div>
      <div class="wrapTab" [ngClass]="{'turnGreen': isCategoryClick && currentCategoryIndex === 3 }"
           (click)="showCategoryTab(3)">
        <span class="spTime">零食</span>
      </div>
      <div class="wrapTab" [ngClass]="{'turnGreen': isCategoryClick && currentCategoryIndex === 4 }"
           (click)="showCategoryTab(4)">
        <span class="spTime">护理</span>
      </div>
    </div>

    <div class="wrapGoods">
      <ul>
        <li *ngFor="let product of productList">
          <div>
            <img class="goodsImg" src="{{product.image}}" (click)="goDetail(product)">
            <p class="goodsName">{{product.name}}</p>
            <div class="priceWrapper">
              <span class="goodsVip">￥{{product.appPrice}}</span><label class="goodsPrice">￥{{product.vemPrice}}</label>
              <img (click)="addToShoppingCart(product)" class="redCart" src="../../assets/images/cart_red.png">
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</ion-content>
